<template>
    <div class="home search">
      
    <form action="/">
  <van-search
    v-model="keyword"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    @click="gotoWhere({name:'search'})"
   

   
  />
</form>

    <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(l,i) in banners" :key='i'>
                    <van-image :src="l.url" class="himg"></van-image>
                    
                </van-swipe-item>
            </van-swipe>

 <ul class="list1">
     <li v-for="(v,i) in banner" :key='i' >
        <router-link :to="{name:'shoplass',query:{id:v.id}}">
            <img :src="v.url" alt="" >
         <h5>{{v.title}}</h5>
         </router-link>
         
     </li>
 </ul>
<ul id="list2">
   <li><a href=""><img src="https://dsfs.oppo.com/archives/202203/20220302110352621f8de83cd73.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a>
   <a href=""><img src="https://dsfs.oppo.com/archives/202203/2022030305034162209115d6b04.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a></li>
  
   <li><a href=""><img src="https://dsfs.oppo.com/archives/202203/202203030503086220916c3edfe.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a>
   <a href=""><img src="https://dsfs.oppo.com/archives/202203/20220304110333622185454ac85.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a></li>

   <li><a href=""><img src="https://dsfs.oppo.com/archives/202203/20220303060309622091e536730.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a>
   <a href=""><img src="https://dsfs.oppo.com/archives/202203/202203030603566220928c3b46f.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a></li>
   
   <li><a href=""><img src="https://dsfs.oppo.com/archives/202203/202203040303476221c1179ebf9.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a>
   <a href=""><img src="https://dsfs.oppo.com/archives/202203/20220302100353621f81413a2ad.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a></li>
      <li><a href=""><img src="https://dsfs.oppo.com/archives/202203/202203040303476221c1179ebf9.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a>
   <a href=""><img src="https://dsfs.oppo.com/archives/202203/20220302100353621f81413a2ad.png?_w_=496&_h_=306&x-oss-process=image/format,webp" alt=""></a></li>
 
   
        
  
</ul>

            
    </div>
    
     
       
</template>

<script>
export default {
    data(){
        return{
         keyword:"",
          banners:[],
          banner:[]
        
        }
    }
    ,
   
     methods:{
 
        async getBanners(){
            let res = await this.$ajax.getMZdata(
          
            )
           this.banners=res.data
        },
            async getBanner(){
                        let res = await this.$ajax.getMZdata1(
                       
                    )
                this.banner=res.data
            },



  onSearch(value) {
      console.log(value);
      this.judge = false;
      this.list = this.content.filter((l) => {
        return (
          l.spuName.indexOf(value) > -1 || l.spuShortDesc.indexOf(value) > -1
        );
      });
      console.log(this.list);
    },
    onCancel() {
      this.judge = true;
      this.value = "";
      this.list = [];
    },
     async getOPcontent() {
      let res = await this.$ajax.findGoods();
      this.a = res.slice(0, 6);
      this.content = res;
      console.log(this.content);
    },
       
           
        
    },
    mounted(){
     this.getBanners()
     this.getBanner()
      this.getOPcontent()
    }
}
</script>

<style lang="scss" scoped>
.home{
    width:100%;
    .banner{
        position: relative;
        .himg{
            width:100%;
            height:210px;
        }
       
    }
   
}
ul{
    list-style: none;
    display: flex;
   
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 0.45rem;
  
}
.list1> li{
    
    list-style: none;
    width: 20%;
    height: 1.28rem;
    margin-top: 0.25rem;
    text-align: center;
}
.list1 img{
   display: block;
   width: 45px;
   height: 45px;
   margin-left: .375rem;
   
}
h5{
    color: #000;
}
#list2 >li{
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 0.16rem;
}
#list2 img{
    width: 100%;
    height: 100%;
    display: block;
}
</style>